<template>
  <div class="loading-wrap" v-if="loading">
    <van-loading :size="`${size}px`" :color="color">加载中...</van-loading>
  </div>
</template>

<script lang="ts">
  import {Component, Vue, Prop} from "vue-property-decorator";
  import {Loading} from "vant";


  @Component({
    components: {
      // 想引入vant组件，必须以这种方式写
      [Loading.name]: Loading,
    }
  })
  export default class LoadingCom extends Vue {
    @Prop({required: true, default: false})
    private loading!: boolean;

    @Prop({default: 30})
    private size!: number;

    @Prop({default: '#929292'})
    private color!: string;
  }
</script>
<style>
  .loading-wrap {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
</style>
